<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>jquery01</title>
		<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*
			* jquery对象和dom对象：
				 *    因为jquery框架有自己的一套对象系统；jquery在进行dom操作时会将dom对象转换为自己的jquery对象；
				 *    jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
				 *    所以jquery获取的控件和dom方式获取的控件对象不是等价的；
				 *    jquery对象是对dom对象的一种包装，二者之间需要进行转换；
				 *    在编程时，注意jquery对象不能调用dom的方法，dom对象不能调用jquery的方法；
				 *    如果想要调用对方的方法，则需要进行转换之后才能调用；
				 *   
				 *    编程约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $.
				 *          var $variable = jQuery 对象
				 *          var variable = DOM 对象
				 * 
				 *    需要注意jquery对象和dom对象之间的转换：
				 *    1、dom对象转换为jquery对象
				 *      $(dom对象) 可以转换为 jquery对象；
				 *   2、jquery对象转换为dom对象
				 *      一般jquery获取的对象都是数组结构的；
				 *      通过 jquery对象[index]或者jquery对象.get(index)来进行转换，（下标从0开始）
				 * 
				 * 
				 */
				function doClick(){
					alert("dom点击");
				}
				$(function(){
					$("#btn1").bind("click",function(){
						alert("jquery点击");
					});
				});
		</script>
	</head>

	<body>
		<input type="button" name="btn" id="btn" value="dom点击" onclick="doClick()"/>
		<input type="button" name="btn1" id="btn1" value="jquery点击" />
	</body>

</html>